<template>
  <div class="menu">
      <!-- 左侧导航栏（一级分类） -->
      <div class="left">
          <ul>
              <li v-for="(item,index) in menus" :key="index">
                  <p>{{ item.name }}</p>
              </li>
          </ul>
      </div>
      <!-- 右侧导航栏（二级分类） -->
      <div class="right">
          <ul>
              <!-- 遍历一级分类 -->
              <li class="cate" v-for="(item,index1) in menus" :key="index1">
                  <!-- 一级分类名称 -->
                  <h4 class="title">{{ item.name }}</h4>
                  <ul class="item">
                      <!-- 从一级分类里边遍历二级分类 -->
                      <li v-for="(item,index2) in item.children" :key="index2">
                          <img :src="item.picture" :alt="item.name">
                          <span>{{ item.name }}</span>
                      </li> 
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</template>

<style lang="scss" scoped>
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 46px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  // 左侧导航
  .left {
      flex: 0 0 80px;
      width: 80px;
      background-color: #f3f3f7;
      line-height: 55px;
      li {
          height: 55px;
          border-bottom: 1px solid #e1e1e1;
      }
  }
  // 右侧导航
  .right {
      flex: 1;
      background: #ffffff;
      // 一级分类
      .cate {
          height: 100%;
          // 一级分类标题
          .title {
              margin: 0;
              text-align: left;
              font-size: 14px;
              color: #333333;
              font-weight: bold;
              margin: 10px;
          }

          // 二级分类
          .item {
              margin: 7px 10px 10px;
              display: flex;
              overflow: hidden;
              flex-flow: row wrap;
              // 分类列表项目
              li {
                  width: 33.3%;
                  // 分类图片
                  img {
                      width: 70px;
                      height: 70px;
                  }
                  // 分类名
                  span {
                      display: inline-block;
                      font-size: 14px;
                      color: #333333;
                  }
              }
          }
      }
  }
}
</style>

<script setup>
import { ref } from 'vue';

// 模拟从后端获取的数据
const categoryList = ref([
{
  id: 1,
  name: "潮流女装",
  picture: "/",
  pid: 0,
},
{
  id: 2,
  name: "羽绒服",
  picture: "/images/category/clothes/jackets.png",
  pid: 1,
},
{
  id: 3,
  name: "毛呢大衣",
  picture: "/images/category/clothes/overcoat.jpg",
  pid: 1,
},
{
  id: 4,
  name: "连衣裙",
  picture: "/images/category/clothes/dress.png",
  pid: 1,
},
{
  id: 5,
  name: "食品",
  picture: "/",
  pid: 0,
},
{
  id: 6,
  name: "休闲零食",
  picture: "/images/category/foods/biscuit.jpg",
  pid: 5,
},
{
  id: 7,
  name: "生鲜果蔬",
  picture: "/images/category/foods/tomato.jpg",
  pid: 5,
},
{
  id: 8,
  name: "饮料汽水",
  picture: "/images/category/foods/drinks.jpg",
  pid: 5,
},
{
  id: 9,
  name: "四季茗茶",
  picture: "/images/category/foods/tea.jpg",
  pid: 5,
},
{
  id: 10,
  name: "粮油调味",
  picture: "/images/category/foods/oil.jpg",
  pid: 5,
},
{
  id: 11,
  name: "珠宝配饰",
  picture: "/",
  pid: 0,
},
{
  id: 12,
  name: "时尚饰品",
  picture: "/images/category/jewelry/ornaments.jpg",
  pid: 11,
},
{
  id: 13,
  name: "品质手表",
  picture: "/images/category/jewelry/watch.jpg",
  pid: 11,
},
{
  id: 14,
  name: "DIY饰品",
  picture: "/images/category/jewelry/diy.jpg",
  pid: 11,
},
{
  id: 15,
  name: "日用百货",
  picture: "/",
  pid: 0,
},
{
  id: 16,
  name: "居家日用",
  picture: "/images/category/store/towel.png",
  pid: 15,
},
{
  id: 17,
  name: "个人清洁",
  picture: "/images/category/store/paper.png",
  pid: 15,
},
{
  id: 18,
  name: "盆碗碟筷",
  picture: "/images/category/store/bowl.png",
  pid: 15,
},
{
  id: 19,
  name: "茶杯茶具",
  picture: "/images/category/store/cup.png",
  pid: 15,
},
{
  id: 20,
  name: "收纳整理",
  picture: "/images/category/store/box.png",
  pid: 15,
},
{
  id: 21,
  name: "手机数码",
  picture: "/",
  pid: 0,
},
{
  id: 22,
  name: "手机",
  picture: "/images/category/phone/phone.png",
  pid: 21,
},
{
  id: 23,
  name: "笔记本",
  picture: "/images/category/phone/computer.png",
  pid: 21,
},
{
  id: 24,
  name: "数码配件",
  picture: "/images/category/phone/headset.png",
  pid: 21,
},
{
  id: 25,
  name: "平板",
  picture: "/images/category/phone/flat.png",
  pid: 21,
},
{
  id: 26,
  name: "相机",
  picture: "/images/category/phone/camera.png",
  pid: 21,
},
{
  id: 27,
  name: "户外运动",
  picture: "/",
  pid: 0,
},
{
  id: 28,
  name: "运动鞋",
  picture: "/images/category/motion/shoes.jpg",
  pid: 27,
},
{
  id: 29,
  name: "球类运动",
  picture: "/images/category/motion/ball.png",
  pid: 27,
},
{
  id: 30,
  name: "垂钓用品",
  picture: "/images/category/motion/fishingrod.png",
  pid: 27,
},
{
  id: 31,
  name: "运动服",
  picture: "/images/category/motion/clothes.png",
  pid: 27,
},
{
  id: 32,
  name: "骑行装备",
  picture: "/images/category/motion/bicycle.png",
  pid: 27,
},
{
  id: 33,
  name: "电动车",
  picture: "/images/category/motion/vehicle.png",
  pid: 27,
},
]);

// 转换成树形结构方法
const convertToTree = (data) => {
  let treeData = [];
  let map = {};
  // 遍历一维数据，建立节点映射
  for (const item of data) {
      map[item.id] = { ...item, children: [] }
  }
  // 遍历映射表，将节点添加到父节点的children中
  for (const item of data) {
      const node = map[item.id];
      // 如果分类的pid=0，那就是父节点
      if (item.pid === 0) {
          // 向父节点添加子节点
          treeData.push(node)
      } else {
          // 添加叶子节点
          const parent = map[item.pid];
          parent.children.push(node);
      }
  }
  return treeData;
}

// 存储转换后的数据
const menus = ref([]);

// 执行转换
const loadCategoryList = () => {
  const treeData = convertToTree(categoryList.value);
  console.log(treeData);
  menus.value = treeData;
}

loadCategoryList();

</script>